import { useNavigate, Link, Outlet } from "react-router-dom";
import React, { useEffect } from "react";

import { Layout, Row, Col, Menu, Space,Modal, Button } from "antd";

import {
  UserOutlined,
  ExclamationCircleOutlined,
  FontColorsOutlined,
} from "@ant-design/icons";

const { Header, Sider, Content } = Layout;
const { SubMenu } = Menu;
const { confirm } = Modal;

function App(props) {
  const navigate = useNavigate();

  useEffect(() => {
    if (!sessionStorage.getItem("token")) {
      navigate("/login");
    }
  }, []);
  const logout = () => {
    confirm({
      title: "你确定要退出吗?",
      icon: <ExclamationCircleOutlined />,
      okText: "确认",
      cancelText: "取消",
      onOk() {
        localStorage.clear();
        sessionStorage.clear();
        navigate("/login");
      },
      onCancel() {
        console.log("Cancel");
      },
    });
  };
  return (
    <div className="App">
      <Layout style={{ minHeight: "100vh" }}>
        <Header className="header" style={{ color: "white", fontSize: 16 }}>
          <Row justify="space-between">
            <Col>蒙古文类文字检测后台管理系统</Col>
            <Col>
              <Space size="large">
                <span>你好 admin</span>
                <span>
                  <Button onClick={logout}>退出</Button>
                </span>
              </Space>
            </Col>
          </Row>
        </Header>
        <Layout>
          <Sider width={200} className="site-layout-background">
            <Menu
              mode="inline"
              defaultSelectedKeys={["1"]}
              defaultOpenKeys={["sub1"]}
              style={{ height: "100%", borderRight: 0 }}
              // theme=
            >
              <Menu.Item key="1" icon={<UserOutlined />}>
                <Link to="/admin/user">用户管理</Link>
              </Menu.Item>
              <Menu.Item key="2" icon={<FontColorsOutlined />}>
                <Link to="/admin/mapping">映射表管理</Link>
              </Menu.Item>
            </Menu>
          </Sider>
          <Layout style={{ padding: "0 24px 24px" }}>
            <Content
              className="site-layout-background"
              style={{
                padding: 24,
                margin: 0,
                minHeight: 280,
              }}
            >
              <Outlet />
            </Content>
          </Layout>
        </Layout>
      </Layout>
    </div>
  );
}

export default App;
